<template>
  <div class="home maxWH">
    <el-row :gutter="10" style="width:100%; margin-left:0;margin-right: 0">
      <el-col v-if="memRole != '主管' && memRole != '超级管理员'" :span="24">
        <el-card shadow="always" style="width:100%">
          <el-row :gutter="24" class="panel-group">
            <el-col :span="8" class="card-panel-col">
              <div class="card-panel" @click="handleGo('/buy/buyapply')">
                <div class="card-panel-icon-wrapper icon-buy">
                  <svg-icon icon-class="buy" class-name="card-panel-icon" />
                </div>
                <div class="card-panel-description">
                  <div class="card-panel-text">
                    我要采购
                  </div>
                  <!-- <div class="card-panel-num" style="text-align:center">
                    {{ no2 }}
                  </div> -->
                </div>
              </div>
            </el-col>
            <el-col :span="8" class="card-panel-col">
              <div class="card-panel" @click="handleGo('/apply_take/stock/apply')">
                <div class="card-panel-icon-wrapper icon-lingqu">
                  <svg-icon icon-class="lingqu" class-name="card-panel-icon" />
                </div>
                <div class="card-panel-description">
                  <div class="card-panel-text" style="text-align:center">
                    我要领用
                  </div>
                  <!-- <div class="card-panel-num">
                    {{ no3 }}
                  </div> -->
                </div>
              </div>
            </el-col>
            <el-col :span="8" class="card-panel-col">
              <div class="card-panel" @click="handleGo('/reject/register')">
                <div class="card-panel-icon-wrapper icon-qiyong">
                  <svg-icon icon-class="qiyong" class-name="card-panel-icon" />
                </div>
                <div class="card-panel-description">
                  <div class="card-panel-text">
                    我要报废
                  </div>
                  <!-- <div class="card-panel-num" style="text-align:center">
                    {{ no4 }}
                  </div> -->
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col v-else :span="24">
        <el-card shadow="always" style="width:100%">
          <el-row :gutter="24" class="panel-group">
            <el-col :span="8" class="card-panel-col">
              <div class="card-panel" :style="{ pointerEvents: buyApply == 0 ? 'none' : 'auto' }"
                @click="handleGo('/buy/batch')">
                <div class="card-panel-icon-wrapper icon-buy">
                  <svg-icon icon-class="daiban" class-name="card-panel-icon" />
                </div>
                <div class="card-panel-description">
                  <div class="card-panel-text">
                    待审批采购申请&nbsp;
                    <span style="color:#40c9c6; font-size: 28px">{{ buyApply }}</span>
                    &nbsp;项
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="8" class="card-panel-col">
              <div class="card-panel" :style="{ pointerEvents: lingquApply == 0 ? 'none' : 'auto' }"
                @click="handleGo('/apply_take/stock/approve')">
                <div class="card-panel-icon-wrapper icon-daiban">
                  <svg-icon icon-class="daiban" class-name="card-panel-icon" />
                </div>
                <div class="card-panel-description">
                  <div class="card-panel-text" style="text-align:center">
                    待审批领用申请&nbsp;
                    <span style="color:#36a3f7; font-size: 28px">{{ lingquApply }}</span>
                    &nbsp;项
                  </div>
                  <!-- <div class="card-panel-num">
                    {{ no3 }}
                  </div> -->
                </div>
              </div>
            </el-col>
            <el-col :span="8" class="card-panel-col">
              <div class="card-panel" :style="{ pointerEvents: qiyongApply == 0 ? 'none' : 'auto' }"
                @click="handleGo('/reject/check')">
                <div class="card-panel-icon-wrapper icon-qiyong">
                  <svg-icon icon-class="daiban" class-name="card-panel-icon" />
                </div>
                <div class="card-panel-description">
                  <div class="card-panel-text">
                    待审批报废申请&nbsp;
                    <span style="color:#f4516c; font-size: 28px">{{ qiyongApply }}</span>
                    &nbsp;项
                  </div>
                  <!-- <div class="card-panel-num" style="text-align:center">
                    {{ no4 }}
                  </div> -->
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always" class="shouye">
          <template #header>
            <div class="card-header">
              <span>库存产品展示</span>
            </div>
          </template>
          <Chart ref="resetRef1" class="ct1" :option="option1" />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="always" class="shouye">
          <template #header>
            <div class="card-header">
              <span>库存容量分析</span>
            </div>
          </template>
          <div style="width:100%;height:250px;">
            <Chart ref="resetRef2" class="ct2" :option="option2" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always" class="shouye">
          <template #header>
            <div class="card-header">
              <span>产品批次分析</span>
            </div>
          </template>
          <div style="width:100%;height:250px">
            <Chart ref="resetRef3" class="ct3" :option="option3" />
          </div>
        </el-card>
      </el-col>
      <el-col :span=12>
        <el-card shadow="always" class="shouye">
          <template #header>
            <div class="card-header">
              <span>产品库存预警</span>
            </div>
          </template>
          <div style="width:100%;height:250px">
            <Chart ref="resetRef4" class="ct4" :option="option4" />
          </div>
        </el-card>
      </el-col>
      <el-col :span=12>
        <el-card shadow="always" class="shouye">
          <template #header>
            <div class="card-header">
              <span>批次采购金额</span>
            </div>
          </template>
          <div style="width:100%;height:250px">
            <Chart ref="resetRef5" class="ct5" :option="option5" />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import Chart from '@/components/Chart'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router';
import * as echarts from 'echarts';
import { cateNum, restNum, batchMoney, wasteApplyNum, buyApplyNum, lingyongApplyNum } from '../api/count';
import { getUserProfile } from "@/api/system/user";

//
const memRole = ref()

//申请统计参数
const qiyongApply = ref()
const buyApply = ref()
const lingquApply = ref()

//各类图参数
const resetRef1 = ref({}) //ref
const resetRef2 = ref({}) //ref
const resetRef3 = ref({})
const resetRef4 = ref({})
const resetRef5 = ref({})
const router = useRouter()
const handleGo = (path) => {
  router.push(path)
}
//玫瑰图
const option1 = ref({
  // toolbox: {
  //   show: true,
  // },
  tooltip: {
    trigger: 'item',
    formatter: '{b} : {c} ({d}%)'
  },
  legend: {
    type: 'scroll',
    orient: 'horizontal',
    bottom: 5,
  },
  series: [
    {
      type: 'pie',
      radius: [30, 100],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 4
      },
      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      emphasis: {
        label: {
          show: false
        }
      },
      data:
        []
    }
  ]
});

//象形柱图
let category = [];//种类
let lineData = [
  600, 550, 1200, 1500, 900, 800, 1200, 1000, 1300, 1800
];//种类上限
let barData = [];//现存
// option
const option2 = ref({
  tooltip: {
    show: true,
    trigger: 'item',
    axisPointer: {
      type: 'shadow'
    },
  },
  legend: {
    type: 'scroll',
    orient: 'horizontal',
    bottom: 5,
  },
  xAxis: {
    data: category,
    axisLabel: {
      fontSize: 7.5
    },
    axisLine: {
      lineStyle: {
        color: '#ccc'
      }
    }
  },
  yAxis: {
    splitLine: { show: false },
    axisLine: {
      lineStyle: {
        color: '#ccc'
      }
    }
  },
  series: [
    {
      name: '容量',
      type: 'line',
      smooth: true,
      showAllSymbol: true,
      symbol: 'emptyCircle',
      symbolSize: 15,
      color: '#58D9F9',
      data: lineData
    },
    {
      name: '现存',
      type: 'bar',
      barWidth: 10,
      itemStyle: {
        borderRadius: 5,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#14c8d4' },
          { offset: 1, color: '#43eec6' }
        ])
      },
      data: barData
    },
    {
      name: '容量',
      type: 'bar',
      barGap: '-100%',
      barWidth: 10,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(20,200,212,0.5)' },
          { offset: 0.2, color: 'rgba(20,200,212,0.2)' },
          { offset: 1, color: 'rgba(20,200,212,0)' }
        ])
      },
      z: -12,
      data: lineData
    },
    {
      name: '容量',
      type: 'pictorialBar',
      symbol: 'rect',
      itemStyle: {
        color: '#37a2da'
      },
      symbolRepeat: true,
      symbolSize: [12, 4],
      symbolMargin: 1,
      z: -10,
      data: lineData
    }
  ]
});

//雷达图
const option3 = ref({
  tooltip: {
    show: true,
    trigger: 'item',
    axisPointer: {
      type: 'shadow'
    }
  },
  radar: {
    indicator: []
  },
  series: [
    {
      type: 'radar',
      data: []
    }
  ]
});

let legend4 = []
let data4 = []
const option4 = ref({
  tooltip: {
    trigger: 'item',
    axisPointer: {
      type: 'shadow'
    },
  },
  legend: {
    orient: 'horizontal',
    bottom: 5,
  },
  xAxis: {
    type: 'category',
    data: legend4,
    axisLabel: {
      fontSize: 7.5
    },
  },
  yAxis: {
    splitLine: { show: false },
    type: 'value'
  },
  series: [
    {
      data: data4,
      type: 'bar',
      itemStyle: {
        color: (params) => {
          return params.value < lineData[params.dataIndex] * 0.1 ? '#F2597F' : '#0770FF';
        }
      },
    }
  ]
});

let legend5 = []
let data5 = []
const option5 = ref({
  tooltip: {
    trigger: 'item',
    axisPointer: {
      type: 'shadow'
    },
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: legend5
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: data5,
      type: 'line',
      areaStyle: {
        color: new echarts.graphic.LinearGradient(
          0, 0, 0, 1, // 渐变方向，从左上角到右下角  
          [
            { offset: 0, color: 'rgba(255, 0, 0, 0.5)' }, // 起始颜色，半透明红色  
            { offset: 1, color: 'rgba(0, 0, 255, 0.5)' } // 结束颜色，半透明蓝色  
          ]
        )
      },
    }
  ]
});

onMounted(() => {
  getUserProfile().then(response => {
    memRole.value = response.roleGroup
  });
  loadData()
})

const loadData = async () => {

  //玫瑰图数据
  const r1 = await cateNum()
  option1.value.series[0].data = r1.data
  //重新渲染一下组件
  resetRef1.value.reset()

  //象柱图数据
  r1.data.forEach(obj => {
    // 将这些键添加到keysArray中  
    category.push(obj.name);
    // 将这些值添加到valuesArray中
    barData.push(obj.value);
  })
  resetRef2.value.reset()

  //雷达图数据
  const r3 = await restNum()
  const temp = Object.keys(r3.data[0].map)
  const t1 = temp.map((item, index) => (
    {
      name: item,
      max: lineData[index]
    }
  ))
  option3.value.radar.indicator = t1

  const temp3 = r3.data.map((obj, index) => {
    const name = obj.name
    const values = Object.values(r3.data[index].map)
    return ({
      name: name,
      value: values
    })
  })
  option3.value.series[0].data = temp3
  resetRef3.value.reset()

  //柱状图数据
  r1.data.forEach(obj => {
    // 将这些键添加到keysArray中  
    legend4.push(obj.name);
    // 将这些值添加到valuesArray中
    data4.push(obj.value);
  })
  resetRef4.value.reset()

  //面积图数据
  const r5 = await batchMoney()
  r5.forEach(obj => {
    // 将这些键添加到keysArray中  
    legend5.push(obj.bname);
    // 将这些值添加到valuesArray中
    data5.push(obj.amount);
  })
  resetRef5.value.reset()

  const d1 = await wasteApplyNum()
  qiyongApply.value = d1.data
  const d2 = await buyApplyNum()
  buyApply.value = d2
  const d3 = await lingyongApplyNum({ flag: 1 })
  lingquApply.value = d3


  // const r2 = await restNum()
  // option2.value.series[1].data = r2.data
  // //重新渲染一下组件
  // resetRef2.value.reset()
}

</script>

<style lang="scss" scoped>
.home {
  // overflow-x: hidden;
  // overflow-y: auto;
  background-color: #f0f2f5;
}

.el-row {
  padding: 5px;
}

.el-col {
  padding: 5px;
  min-height: 100px;
}

// .shouye {
//   height: 350px;
// }

.panel-group {
  padding: 0px;
  margin: 0px;

  .card-panel {
    height: 88px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    // background-image: url('src/assets/images/cardback.jpeg');
    // background-repeat: no-repeat;
    // background-size: cover; 
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-buy {
        background: #40c9c6;
      }

      .icon-lingqu {
        background: #36a3f7;
      }

      .icon-qiyong {
        background: #f4516c;
      }

      .icon-daiban {
        background: #36a3f7;
      }
    }

    .icon-buy {
      color: #40c9c6;
    }

    .icon-lingqu {
      color: #36a3f7;
    }

    .icon-qiyong {
      color: #f4516c;
    }

    .icon-daiban {
      color: #36a3f7;
    }

    .card-panel-icon-wrapper {
      float: left;
      // left: 10px;
      margin: 10px 0 0 30px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 40px;
    }

    .card-panel-description {
      float: right;
      font-weight: 600;
      margin: 30px 50px 0 0;
      margin-left: 0px;

      .card-panel-text {
        color: rgba(0, 0, 0, 0.45);
        font-size: 20px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}

.ct1 {
  width: 100%;
  height: 250px;
}

.ct2 {
  width: 100%;
  height: 250px;
}

.ct3 {
  width: 100%;
  height: 250px;
}

.ct4 {
  width: 100%;
  height: 250px;
}

.ct5 {
  width: 100%;
  height: 250px;
}
</style>
